<%@ page contentType="text/html; charset=utf-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>在线考试系统</title>
    <link href="${base}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${base}/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${base}/css/style.min.css" rel="stylesheet">
    <link href="${base}/css/animate.css" rel="stylesheet">
</head>
<style>
    .lyear-wrapper {
        position: relative;
    }
    .lyear-login {
        display: flex !important;
        min-height: 100vh;
        align-items: center !important;
        justify-content: center !important;
    }
    .login-center {
        background: #fff;
        min-width: 38.25rem;
        padding: 2.14286em 3.57143em;
        border-radius: 5px;
        margin: 2.85714em 0;
    }
    .login-header {
        margin-bottom: 1.5rem !important;
    }
    .login-center .has-feedback.feedback-left .form-control {
        padding-left: 38px;
        padding-right: 12px;
    }
    .login-center .has-feedback.feedback-left .form-control-feedback {
        left: 0;
        right: auto;
        width: 38px;
        height: 38px;
        line-height: 38px;
        z-index: 4;
        color: #dcdcdc;
    }
    .login-center .has-feedback.feedback-left.row .form-control-feedback {
        left: 15px;
    }
</style>
<body>
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <form action="${base}/user/login" method="post">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的用户名" class="form-control" name="account" id="account" />
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left row">
                    <div class="col-xs-7">
                        <input type="text" id="code" name="captcha" class="form-control" placeholder="验证码">
                        <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-5">
                        <img src="${base}/user/getCode" class="pull-right" id="captcha" style="cursor: pointer;"
                             onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
                        <%--单机一次 更新一张图片验证码 单机验证图片可能会单机多次 出现缓存 请求的后面拼接一个随机数
                         是为了防止缓存（浏览器的缓存） 防止缓存 还可以拼接 随机不重复的内容（时间戳 UUID 随机数）--%>
                    </div>
                </div>
                <div class="form-group">
                    <button id="bth-login" class="btn btn-block btn-primary" type="submit">登录</button>
                    <button id="bth-register" class="btn btn-block btn-primary" type="button">没有账号？去注册！</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="${base}/js/jquery.min.js"></script>
<script src="${base}/js/bootstrap.min.js"></script>
<script>;</script>
<!--消息提示-->
<script src="${base}/js/bootstrap-notify.min.js"></script>
<script src="${base}/js/lightyear.js"></script>
<script src="${base}/js/main.min.js"></script>
<script>
    $("#bth-register").click(function () {
        window.location.href="${base}/toRegister";
    })
    if (${!empty error}) {
        lightyear.loading('show');
        // 假设ajax提交操作
        setTimeout(function () {
            lightyear.loading('hide');
            lightyear.notify('${error}', 'danger', 0);
        }, 0)
    }
</script>
</html>



